
import React from 'react'
import {Card,Row,Col,Button,Icon,Form, Input,message } from 'antd';
import {Link} from 'react-router-dom'
import PureRenderMixin from 'react-addons-pure-render-mixin'

import LeftMenu from 'component/leftmenu/index.jsx';
import HeadImgContent from 'component/headimgcontent/index.jsx';
import LeftMenuItem from 'component/leftmenuitem/index.jsx';


import MMUtile from 'util/mm.jsx'
import User from 'service/user-service.jsx'
const _mm = new MMUtile();
const _user = new User();


const FormItem = Form.Item;


let residences = [];	


let userInfo = _mm.getStorage('userInfo')?JSON.parse(_mm.getStorage('userInfo')):{};
class UserNickForm extends React.Component{
	constructor(props){
		super(props);
		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
		this.state = {
			nickName:'',
			items:[{'name':'修改头像','actived':false,'link':'/update-head-img','icon':'smile-o'},
			{'name':'基本资料','actived':false,'link':'/user-base','icon':'solution'},
			{'name':'详细资料','actived':false,'link':'/user-link','icon':'link'},
			{'name':'设置昵称','actived':true,'link':'','icon':'tool'},
			{'name':'账号绑定','actived':false,'link':'/binduser','icon':'lock'}]
		}

	}
	componentDidMount(){
		
		//获取基本资料
		if(userInfo.nickName){
			this.setState({
				nickName:userInfo.nickName
			})
		}
	}
	handleSubmit(e){
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
    	if (err) {
        return;
      }
      if(!values.nickName){
      	message.error('请输入昵称');
      	return ;
      }
			_user.setNickName({
				nickName:values.nickName
			}).then((res)=>{
				userInfo.nickName = values.nickName;
				_mm.setStorage('userInfo',userInfo);
				message.success('用户昵称保存成功');
			},(errMsg)=>{
				_mm.errorTips(errMsg);
			})
      
    });
  }
	render(){
		const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
		return(
			<div>
				<Row gutter={24}>
					<Col span={7}>
		        <Card bordered={true} className="itemminheight"><LeftMenuItem items={this.state.items}></LeftMenuItem></Card>
		      </Col>
		      <Col span={17}>

						<Form onSubmit={this.handleSubmit.bind(this)}>
			        <Card title="用户昵称" bordered={false}>
			        	
			        	<Row>
			        		<Col span={12}>
										<FormItem
											{...formItemLayout}
						          label="用户昵称">
						          {getFieldDecorator('nickName', {
						            initialValue:this.state.nickName,
						          })(
						          <Input placeholder="请输入昵称" />)}
						        </FormItem>
			        		</Col>
			        	</Row>
			        	<FormItem>
				          <Button
				            type="primary"
				            htmlType="submit"
				          >
				            提交
				          </Button>
				        </FormItem>
			        </Card>
						</Form>
		      </Col>
				</Row>
			</div>
		)
	}
}
const UserNick = Form.create()(UserNickForm);
export default UserNick;